<template>
	<div class="_fc-required">
		<ElSwitch v-model="required"></ElSwitch>
		<ElInput v-model="requiredMsg" v-if="required" placeholder="请输入提示语"></ElInput>
	</div>
</template>

<script>
	import is from '@form-create/utils/lib/type'
	import { ref, watchEffect, watch, onMounted, } from 'vue'

	export default {
		name: 'Required',
		props: {
			modelValue: [Boolean, String]
		},
		setup (props, { emit }) {
			const required = ref(false)
			const requiredMsg = ref('')

			watchEffect(() => {
				const flag = is.String(props.modelValue)
				required.value = props.modelValue == null ? false : (flag ? true : !!props.modelValue)
				requiredMsg.value = flag ? props.modelValue : ''
			})

			watchEffect(() => {
				let val
				if (required.value === false) {
					val = false
				} else {
					val = requiredMsg.value
				}
				emit('update:modelValue', val)
			})

			return {
				required, requiredMsg
			}
		}
	}
</script>

<style>
	._fc-required {
		display: flex;
		align-items: center;
	}

	._fc-required .el-input {
		margin-left: 15px;
	}

	._fc-required .el-switch {
		height: 28px;
	}
</style>
